<template>
  <div class="graduationDegree">
    <el-card class="card">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>毕业要求达成度管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索框 -->
        <div class="user-search">
          <el-select v-model="query" slot="prepend" placeholder="请选择课程" class="input-with-select" @input="watchSingel()" ref="S_course">
            <el-option v-for="item of list" :key="item.cid" :label="item.name" :value="item.cid"></el-option>
          </el-select>
          <el-button type="success" @click="watchSingel()">个体达成度</el-button>
          <el-button type="primary" @click="getgdhead(),watchAll()">总体达成度</el-button>
        </div>
        <!--毕业要求总列表 -->
        <div class="text" v-show="SumTab">
          <div class="textcolor">
            <span class="tip" @click="updateData">如若数据显示异常，请点击此处更新</span>
          </div>
          <template>
            <!-- @header-click="openCourse"
            :header-cell-style="{cursor:'pointer'}" -->
            <el-table
              :data="tableData"
              stripe
              style="width: 100%"
              height="470"
              v-loading="loading"
              class="table-fixed"
              ref="tabel"
              >
              <el-table-column
                fixed="left"
                prop="name"
                label="毕业要求指标点"
                min-width="260"
                >
              </el-table-column>
              <el-table-column
                v-for="item in tableHead"
                :label="item.label"
                :prop="item.prop"
                :key="item.$index"
                width="200">
                  <template slot-scope="scope">
                    {{scope.row.map[scope.column.property]}}
                  </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
        <!-- 课程总体毕业达成度列表 -->
        <div v-show="onCourseTab">
          <!-- <el-page-header @back="goBack" :content="this.labelName" class="InnerTabs">
          </el-page-header> -->
          <div class="textcolor" style="margin-top:10px">
            <span class="tip" @click="updateData2">如若数据显示异常，请点击此处更新</span>
          </div>
          <template class="text">
            <el-table
              :data="onCourseData"
              stripe
              style="width: 100%"
              height="470"
              ref="tabel2"
              >
              <el-table-column
                prop="number"
                label="毕业指标点"
                width="150">
              </el-table-column>
              <el-table-column
                prop="list"
                label="课程目标及其支撑度"
                width="400">
                <template slot-scope="scope">
                  <div  v-for="item in scope.row.list" :key="item.$index">
                    <span>{{item.aimName}}</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;{{item.support}}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="requireReach"
                label="毕业达成度分值"
                width="200">
              </el-table-column>
              <el-table-column
                prop="weight"
                label="权重"
                width="200">
              </el-table-column>
              <el-table-column
                prop="reach"
                label="毕业达成度"
              >
              </el-table-column>
            </el-table>
          </template>
        </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'graduationDegree',
  data () {
    return {
      loading: false,
      SumTab: false,
      onCourseTab: true,
      query: '',
      list: [],
      tableData: [],
      tableHead: [],
      state: '',
      courselist: [],
      courselength: '',
      cid: '',
      onCourseData: [],
      labelName: ''
    }
  },
  components: {},
  mounted () {
    this.loading = true
  },
  created () {
    this.getcourse()
    this.getgdhead()
    this.getcourselist()
  },
  methods: {
    // 获取所有课程
    async getcourse () {
      // 需要授权的API必须设置请求头
      const AUTH_TOKEN = sessionStorage.getItem('token')
      this.$http.defaults.headers.common['token'] = AUTH_TOKEN
      // 后台token的key是token
      this.$http.defaults.headers.get['Content-Type'] = 'application/json'
      this.$http.defaults.headers.get['Accept'] = 'application/json'
      const res = await this.$http.get(`course/list?pageNum=1&pageSize=9999&name=`)
      // console.log(res)
      const {code, msg, page} = res.data
      // console.log(this.status)
      if (code === 200) {
        this.loading = false
        this.list = page.list
      } else {
        this.loading = false
        this.$message.error(msg)
      }
    },
    // 获取所有指标点达成度
    async getassessmentlist () {
      this.$http.get(`reach/list`).then((res) => {
        console.log(res)
        const {status, msg, data} = res.data
        if (status === 200) {
          this.tableData = data
          this.loading = false
          this.$nextTick(() => {
            this.$refs.tabel.doLayout()
          })
        } else {
          console.log(msg)
          this.tableData = []
          this.loading = false
          this.$message.error(msg)
        }
      })
    },
    // 毕业要求达成度更新链接
    async updateData () {
      const res = await this.$http.put('reach/update/list')
      console.log(res)
      const {status, msg, data} = res.data
      if (status === 200) {
        this.tableData = data
        this.loading = false
        this.$nextTick(() => {
          this.$refs.tabel.doLayout()
        })
      } else {
        console.log(msg)
        this.tableData = []
        this.loading = false
        this.$message.error(msg)
      }
    },
    // 达成度表格头
    async getgdhead () {
      // 需要授权的API必须设置请求头
      const AUTH_TOKEN = sessionStorage.getItem('token')
      this.$http.defaults.headers.common['token'] = AUTH_TOKEN
      // 后台token的key是token
      this.$http.defaults.headers.get['Content-Type'] = 'application/json'
      this.$http.defaults.headers.get['Accept'] = 'application/json'
      const res = await this.$http.get(`reach/course_item`)
      // console.log(res)
      const {status, msg, data} = res.data
      // console.log(this.status)
      if (status === 200) {
        this.tableHead = data
        this.getassessmentlist()
      } else {
        // this.tableData = []
        this.loading = false
        this.$message.error(msg)
      }
    },
    // 动态生成全体的达成度的列
    autoTotalColume () {
      this.tableHead.pop()
      this.tableData[0].list.forEach(
        (item, index) => {
          this.tableHead.push({
            name: item.key,
            prop: `list[${index}].value`
          })
        }
      )
    },
    // 返回总体页面
    goBack () {
      this.SumTab = true
      this.onCourseTab = false
      this.$nextTick(() => {
        this.$refs.tabel.doLayout()
      })
    },
    // 获取课程信息
    async getcourselist () {
      const res = await this.$http.get(`course/list?pageNum=1&pageSize=9999&name=`)
      const {code, msg, page} = res.data
      if (code === 200) {
        for (var i = 0; i < page.list.length; i++) {
          this.courselist.push({cid: page.list[i].cid, name: page.list[i].name})
          this.courselength = page.list.length
        }
        // console.log(this.courselist)
      } else {
        console.log(msg)
      }
    },
    // 点击某一列进入其具体课程达成度展示
    async openCourse (column, event) {
      // console.log(column, event)
      this.labelName = column.label
      for (var i = 0; i < this.courselength; i++) {
        if (column.label === this.courselist[i].name) {
          this.cid = this.courselist[i].cid
        }
      }
      if (this.cid) {
        const res = await this.$http.get(`reach/quota_reach/${this.cid}`)
        // console.log(res)
        if (res.data.status === 200) {
          this.SumTab = false
          this.onCourseTab = true
          this.onCourseData = res.data.data
        } else {
          this.$message.error(res.data.msg)
        }
      }
    },
    // 课程毕业要求达成度分析更新链接
    async updateData2 () {
      const res = await this.$http.put(`reach/update/quota_course/${this.query}`)
      console.log(res)
      if (res.data.status === 200) {
        this.onCourseData = res.data.data
      } else {
        this.$message.error(res.data.msg)
      }
    },
    // 进入总体页面
    watchAll () {
      if (this.query) {
        this.SumTab = true
        this.onCourseTab = false
        this.$nextTick(() => {
          this.$refs.tabel.doLayout()
        })
      } else {
        this.$message.error('请先选择课程！')
      }
    },
    // 进入个体页面
    watchSingel () {
      if (this.query) {
        this.SumTab = false
        this.onCourseTab = true
        this.getsingel()
      } else {
        this.$message.error('请先选择课程!')
      }
    },
    // 获取单个毕业达成度
    async getsingel () {
      const res = await this.$http.get(`reach/quota_reach/${this.query}`)
      console.log(res)
      if (res.data.status === 200) {
        this.SumTab = false
        this.onCourseTab = true
        this.onCourseData = res.data.data
      } else {
        this.$message.error(res.data.msg)
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.graduationDegree,.card
  height 100%
  min-width: 1200px
  .text
    padding-top 10px
    width 100%
.textcolor
  font-size 13px
  color red
.InnerTabs
  margin-top 15px
.tip
  color #aaa
  cursor pointer
  margin-left 5px
.tip:hover
  text-decoration underline
.user-search
  margin-top 15px
  width 100%
  .back-btn
    width 100px
    text-align center
</style>
